import React, { Component } from "react";
import { withRouter } from "react-router-dom";
import { RightOutlined, LikeOutlined } from "@ant-design/icons";
import style from "./MusicScore.module.less";
import demo from "../../../../assets/image/demo.jpg";
import AlphaTab from "@src/utils/AlphaTab";
import { Button, Input } from "antd";
import {AllMusicPuRequest, getCommentRequest, GetMusicRequest, sendingCommentRequest} from "@requests/Music";
import Loading from "@utils/Loading";
import {toast} from "react-toastify";
class MusicScore extends Component {
  state = {
    musicPu:null,
    Popular:null,
    CommentValue:'',
    CommentList : null
  }
  componentDidMount() {
    let MusicSID = this.props.match.params.id;
    this.getMusicPu(MusicSID)
    this.getComment(MusicSID)
    // AlphaTab(MusicSID, "https://www2.alphatab.net/files/canon.gp");
  }
  getMusicPu = async(MusicSID) => {
    const request = await GetMusicRequest(MusicSID)
    this.setState({
        musicPu : request.results
    })
    const response = await AllMusicPuRequest()
    const data = response.result.slice(0,5)
    this.setState({
      Popular:data
    })
    //传递乐谱url
    setTimeout(() => {
      AlphaTab(MusicSID, request.results[0].file);
    },100)
  }
  getComment = async(MusicSID) =>{
    const request = await getCommentRequest(MusicSID)
    if(request.code === 400){
      toast.warn('获取评论列表失败!', {
        autoClose: 1000,
      });
      return
    }
    // console.log(request)
    this.setState({
      CommentList:request.results
    })
  }
  onChange = (event) => {
    this.setState({
      CommentValue:event.target.value
    })
  }
  submit= async() => {

    let user = JSON.parse(sessionStorage.getItem("user"))
    if(user === null){
      toast.warn('请登录！', {
        autoClose: 1000,
      });
      this.props.history.replace('/Login')
        return
    }
    let musicPuId = this.props.match.params.id
    if(this.state.CommentValue === ''){
      toast.warn('评论不能为空！', {
        autoClose: 1000,
      });
      return
    }

    const response = await  sendingCommentRequest({
      "userId":user.id,
      "musicPuId":musicPuId,
      "text":this.state.CommentValue
    })
    this.getComment(musicPuId)
    // console.log(response)
    this.setState({
      CommentValue:''
    })
  }
  render() {
    const { TextArea } = Input;
    if(this.state.Popular === null){
      return  ( <Loading />)
    }
    if(this.state.musicPu === null){
        return(
            <Loading />
        )
    }
    if(this.state.CommentList === null) return (<Loading />)
    const musicPu=this.state.musicPu
    const Popular = this.state.Popular
    const Comment = this.state.CommentList
    return (
      <div className={style.All}>
        <div className={style.Header}>
          <img src={process.env.REACT_APP_BASE_URL + musicPu[0].file_img} alt="背景图片" />
          <div className={style.Smegma}></div>
          <div className={style.details}>
            <div className={style.left}>
              {" "}
              <img src={process.env.REACT_APP_BASE_URL + musicPu[0].file_img} alt="背景图片" />
            </div>
            <div className={style.right}>
              <h1>《 {musicPu[0].title} 》</h1>
              <p>作者：{musicPu[0].author}</p>
              <p>简介：{musicPu[0].brief}</p>
            </div>
          </div>
        </div>
        <div className="center">
          <div className={style.body}>
            {/* 容器 */}
            <div className={style.body_left}>
              <div className="at-wrap">
                <div className="at-overlay">
                  <div className="at-overlay-content">
                    Music sheet is loading
                  </div>
                </div>
                <div className="at-content">
                  <div className="at-sidebar">
                    <div className="at-sidebar-content">
                      <div className="at-track-list"></div>
                    </div>
                  </div>
                  <div className="at-viewport">
                    <div className="at-main"></div>
                  </div>
                </div>
                <div className="at-controls">
                  <div className="at-controls-left">
                    <a className="btn at-player-stop disabled">
                      <i className="fas fa-step-backward"></i>
                    </a>
                    <a className="btn at-player-play-pause disabled">
                      <i className="fas fa-play"></i>
                    </a>
                    <span className="at-player-progress">0%</span>
                    <div className="at-song-info">
                      <span className="at-song-title"></span> -
                      <span className="at-song-artist"></span>
                    </div>
                    <div className="at-song-position">00:00 / 00:00</div>
                  </div>
                  <div className="at-controls-right">
                    <a className="btn toggle at-count-in">
                      <i className="fas fa-hourglass-half"></i>
                    </a>
                    <a className="btn at-metronome">
                      <i className="fas fa-edit"></i>
                    </a>
                    <a className="btn at-loop">
                      <i className="fas fa-retweet"></i>
                    </a>
                    <a className="btn at-print">
                      <i className="fas fa-print"></i>
                    </a>
                    <div className="at-zoom">
                      <i className="fas fa-search"></i>
                      <select defaultValue={"100"}>
                        <option value="25">25%</option>
                        <option value="50">50%</option>
                        <option value="75">75%</option>
                        <option value="90">90%</option>
                        <option value="100">100%</option>
                        <option value="110">110%</option>
                        <option value="125">125%</option>
                        <option value="150">150%</option>
                        <option value="200">200%</option>
                      </select>
                    </div>
                    <div className="at-layout">
                      <select defaultValue={"page"}>
                        <option value="horizontal">一行</option>
                        <option value="page">多行</option>
                      </select>
                    </div>
                  </div>
                </div>
              </div>

              <template id="at-track-template">
                <div className="at-track">
                  <div className="at-track-icon">
                    <i className="fas fa-guitar"></i>
                  </div>
                  <div className="at-track-details">
                    <div className="at-track-name"></div>
                  </div>
                </div>
              </template>
            </div>
            {/* end */}
            <div className={style.body_right}>
              <div className={style.body_author}>
                <img src={process.env.REACT_APP_BASE_URL + musicPu[0].user_img} alt="" />
                <Button ghost className={style.GuanZhu}>
                  关注 +
                </Button>
                <div>
                  <p>粉丝：</p>
                  <p>发帖：</p>
                </div>
              </div>
              <div className={style.body_recommend}>
                <div className={style.body_Popular}>
                  <p className={style.reMeng}>
                    <span>最近热门</span>
                    <span>
                      更多
                      <RightOutlined />
                    </span>
                  </p>
                  <ul>
                    {
                      Popular.map((item)=>{
                        // console.log(item)
                        return (
                            <li key={item.id}>
                          <div className={style.one}>
                            <img src={process.env.REACT_APP_BASE_URL+item.file_img} alt="" />
                          </div>
                          <div className={style.two}>
                            <p>{item.title}</p>
                          </div>
                        </li>
                        )
                      })
                    }
                  </ul>
                </div>
              </div>
            </div>
          </div>
          <div className={style.footer}>
            <div className={style.comment}>
              <p>请开始你的表演~~</p>
              <TextArea
                showCount
                maxLength={100}
                style={{
                  height: 120,
                  resize: "none",
                  // border: 0,
                  width: "90%",
                  // display: "block",
                  margin: "0 5%",
                }}
                value = {this.state.CommentValue}
                onChange={this.onChange}
                placeholder="这不来评论一下么？"
              />
              <button
                // type="primary"
                style={{
                  display: "block",
                  margin: "1% auto",
                  border:'0',
                  width:'15%',
                  height:'15%',
                  backgroundColor:'skyblue',
                  color:'white'
                }}
                onClick={this.submit}
              >
                发表评论
              </button>
            </div>
            <div className={style.Clist}>
              <ul>
                {/*<li>*/}
                {/*  <div className={style.top}>*/}
                {/*    <img src={demo} alt="" />*/}
                {/*    <p>name</p>*/}
                {/*  </div>*/}
                {/*  <div className={style.center}>*/}
                {/*    评论内容，评论内容，评论内容*/}
                {/*  </div>*/}
                {/*  <div className={style.bottom}>*/}
                {/*    <div>地址：山东</div>*/}
                {/*    <div>*/}
                {/*      <LikeOutlined className={style.dizan} />*/}
                {/*      &nbsp;1*/}
                {/*    </div>*/}
                {/*  </div>*/}
                {/*</li>*/}
                {Comment.map((item) => {
                  console.log(item)
                  return (
                      <li key = {item.id}>
                    <div  className={style.top}>
                      <img src={process.env.REACT_APP_BASE_URL+item.userImg} alt="" />
                      <p>{item.userName}</p>
                    </div>
                    <div className={style.center}>
                      {item.content}
                    </div>
                    <div className={style.bottom}>
                      <div>地址：{item.address}</div>
                      <div>
                        <LikeOutlined className={style.dizan} />
                        &nbsp;1
                      </div>
                    </div>
                  </li>
                  )
                })}
              </ul>
            </div>
          </div>
        </div>
      </div>
    );
  }
}
export default withRouter(MusicScore);
